<template>
	<view class="view-contain">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module leftIcon="arrow-left" :title="title" />
		<view class="search">
			<u-row gutter="24">
				<u-col span="6">
					<u-input v-model="zlnf" placeholder="招录年份" border="bottom" />
				</u-col>
				<u-col span="6">
					<u-input v-model="dqmc" placeholder="地区名称" border="bottom" />
				</u-col>
			</u-row>
			<u-row gutter="24">
				<u-col span="6">
					<u-input v-model="xueli" placeholder="学历" border="bottom" />
				</u-col>
				<u-col span="6">
					<u-input v-model="zhuanye" placeholder="专业" border="bottom" />
				</u-col>
			</u-row>
			<u-row gutter="24">
				<u-col span="12">
					<u-input v-model="qita" placeholder="其他" border="bottom" />
				</u-col>
			</u-row>
		</view>
		<mescroll-uni :height="`${height}px`" :down="downOption" :up="upOption" @init="mescrollInit"
			@down="downCallback" @up="upCallback">
			<view class="review-item u-flex u-flex-between" v-for="(item, index) in postList" :key="index">
				<view>
					<view class="sjmc">{{ item.dwmc }}</view>
					<view class="zexq u-flex u-flex-between">
						<view class="item">地区名称: {{ item.dqmc }}</view>
						<view class="item">职位类别: {{ item.zwlb }}</view>
						<view class="item">招考人数: {{ item.zkrs }}</view>
					</view>
					<view class="zwmc">职位名称：{{ item.zwmc }}</view>
					<view class="zwmc">报名人数：{{ item.bmrs }}</view>
					<view class="zwmc">更新时间：{{ item.chaxunTime }}</view>

				</view>
				<view class="flex-shrink-0 u-flex-y u-flex-end">
					<view class="btn-detail u-flex-shrink" @click="toDetail(item)">查看详情</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		gwbList
	} from "@/config/api.js"

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				title: '岗位筛选',
				height: 0,
				zlnf: '',
				dqmc: '',
				xueli: '',
				zhuanye: '',
				qita: '',
				postList: [],
				downOption: {
					use: false
				},
				upOption: {
					textNoMore: '一不小心被你看完啦~',
					toTop: {
						right: '24rpx',
						bottom: '60rpx'
					}
				}
			}
		},
		// 监听
		watch: {
			zlnf(val, oldVal) {
				if (val !== oldVal) {
					uni.$u.debounce(this.mescroll.resetUpScroll(), 1000)
				}
			},
			dqmc(val, oldVal) {
				if (val !== oldVal) {
					uni.$u.debounce(this.mescroll.resetUpScroll(), 1000)
				}
			},
			xueli(val, oldVal) {
				if (val !== oldVal) {
					uni.$u.debounce(this.mescroll.resetUpScroll(), 1000)
				}
			},
			zhuanye(val, oldVal) {
				if (val !== oldVal) {
					uni.$u.debounce(this.mescroll.resetUpScroll(), 1000)
				}
			},
			qita(val, oldVal) {
				if (val !== oldVal) {
					uni.$u.debounce(this.mescroll.resetUpScroll(), 1000)
				}
			}
		},
		onShow() {
			const res = uni.getSystemInfoSync()
			this.height = res.windowHeight - 230 // 100为组件高度
			this.mescroll.resetUpScroll()
		},
		methods: {
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			async upCallback(page) {
				try {
					const res = await gwbList(
						`?pageNum=${page.num}&pageSize=${page.size}&zlnf=${this.zlnf}&dqmc=${this.dqmc}&xueli=${this.xueli}&zhuanye=${this.zhuanye}&qita=${this.qita}`
						)
					if (res && res.rows) {
						// 后台接口有返回列表的总数据量
						this.mescroll.endBySize(res.rows?.length || 0, res.total); // 必传参数(当前页的数据个数, 总数据量)
						// 如果是第一页需手动制空列表
						if (page.num == 1) {
							this.postList = []
						}
						this.postList = Object.freeze(this.postList.concat(res.rows)); //追加新数据	
					}
				} catch (error) {
					//联网失败, 结束加载
					this.mescroll.endErr();
				}
			},
			toDetail(item) {
				const data = JSON.stringify(item)
				uni.navigateTo({
					url: `/pages/post/components/detail?data=${data}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view-contain {
		position: relative;

		.search {
			margin: 24rpx 24rpx;
		}

		.review-item {
			width: calc(100vw - 48rpx);
			margin: 12rpx 24rpx 12rpx;
			padding: 24rpx;
			background-color: #FFF;
			border-radius: 32rpx;

			.sjmc {
				font-size: 42rpx;
				font-weight: bold;
				margin-bottom: 32rpx;
				white-space: normal;
				word-break: break-all;
				overflow: hidden;
			}

			.zexq {
				margin: 36rpx 0;
				min-width: 480rpx;
				font-size: 24rpx;
				font-weight: normal;
				color: #333;

				.item {
					padding: 2rpx 4rpx;
					border: 1rpx solid #ccc;
				}
			}

			.zwmc {
				font-size: 28rpx;
				font-weight: normal;
				color: #333;
			}

			.btn-detail {
				border-radius: 12rpx;
				font-size: 28rpx;
				padding: 0 12rpx;
				color: #409EFF;
				border: 1rpx solid #409EFF;
			}
		}

		.flex-shrink-0 {
			flex-shrink: 0;
		}

	}
</style>